<template>
  <div>
    <a-button type="primary" @click="showModal">打开 A Modal</a-button>

    <!--   <component :is="modalComponent" v-if="ifShowM" :visible="isModalVisible" ref="modalA" title="A Modal"
      @ok="handleOk"
      @cancel="handleCancel"> -->
      <a-modal
      ref="modalA"
      v-model:visible="isModalVisible"
      title="A Modal"
      @ok="handleOk"
      @cancel="handleCancel" destroyOnClose
    >
      <a-button @click="handleCancel">关闭</a-button>
      <myList />
      <!-- <p :class="'myp'+i" v-for="(item,i) in 1000" :key="i">这是 A Modal 的内容{{item}}</p> -->
    </a-modal>

 
    
  </div>
</template>

<script>
import myList from './myList.vue'
export default {
  name: 'AP',
  components:{
    myList
  },
  data() {
    return {
      ifShowM:true,
      modalComponent:'aModal',
      isModalVisible: false,
    };
  },
  created(){
    this.ifShowM = true
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
    },
    handleOk() {
      this.isModalVisible = false;
      this.clearModalState();
    },
    handleCancel() {
      this.isModalVisible = false;
      this.clearModalState();
    },
    clearModalState() {
      // 在这里清理 Modal 的状态
    },
  },
 
  beforeDestroy() {
    //this.ifShowM= false
    // 清理事件监听器或其他资源
    /* let myBox = this.$refs.modalA
    // 移除所有子节点
    while (myBox.firstChild) {
        myBox.removeChild(myBox.firstChild);
    }
    myBox= null */
  },
};
</script> 